<template>
  <!-- 店铺信息详情页面 -->
	<view class="store-detail u-skeleton">
    <!-- 店铺卡片 -->
		<store-card :info="storeInfo" :keysOption="storeKeysOption" @collectChange="getStoreInfo"></store-card>
    
    <!-- main -->
    <view class="main">
      <!-- 企业信息 -->
      <view class="card-box company-info">
        <view class="title-box">
          <i-icon icon="iconqiye1" size="34rpx" color="#FBD220" class="u-skeleton-circle"></i-icon>
          <text class="font-28 color-333 ml-10 u-skeleton-rect">企业信息</text>
        </view>
        
        <view class="info-box">
          <view class="row flex flex-jc-sb u-skeleton-rect">
            <text class="font-28 color-999">公司全称</text>
            <text class="value">{{ storeInfo.company_name || '123' }}</text>
          </view>
          <view class="row flex flex-jc-sb">
            <text class="font-28 color-999">企业类型</text>
            <text class="value">{{ storeInfo.store_type }}</text>
          </view>
          <view class="row flex flex-jc-sb">
            <text class="font-28 color-999">注册地址</text>
            <text class="value">{{ storeInfo.company_address }}</text>
          </view>
          <view class="row flex flex-jc-sb">
            <text class="font-28 color-999">描述</text>
            <text class="value">{{ storeInfo.reason }}</text>
          </view>
        </view>
      </view>
      
      <!-- 营业执照 -->
      <view class="card-box business-license flex flex-jc-sb">
        <view class="left">
          <i-icon icon="iconyingyezhizhao" color="#FBD220"></i-icon>
          <text class="font-28 color-333 ml-20">营业执照</text>
        </view>
        <view class="right">
          <image :src="storeInfo.licenseImg" mode="widthFix" class="img"></image>
        </view>
      </view>
    </view>
    
    <!-- 骨架屏 -->
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
  import storeCard from '@/components/store/store-card.vue'
  
	export default {
		components: {
		  storeCard,
		},
    
    data() {
      return {
        storeId: '',  // 店铺id
        // 店铺信息
        storeInfo: {
          city: "成都市",
          deposit: false,
          fans: "0",
          isgover: true,
          store_id: "",
          store_name: "四川合锐",
          store_topimg: "https://www.baidu.com/img/flexible/logo/plus_logo_web_2.png",
          store_type: 4
        },
        storeKeysOption: {
          headerImg: 'store_topimg',
          name: 'store_name',
          isgover: 'isgover',
          city: 'city',
          deposit: 'deposit',
          fans: 'fans'
        },
        
        loading: true
      }
    },
    
    onLoad(e) {
      this.storeId = e.id
    },
    
    created() {
      this.getStoreInfo()
    },
    
    // 监听页面返回
    onBackPress() {
      uni.$emit('updateStore', 1)
      return false
    },
    
    onHide() {
      uni.$off('updateStore')
    },
    
    methods: {
      // 获取店铺信息
      async getStoreInfo() {
        try {
          const res = await this.$api.store.StoreHomePageBasics({
            store_id: this.storeId,
            current_store_id: this.$store.state.userInfoDetail.store.storeId
          })
          this.storeInfo = res.data
          this.loading = false
        } catch (e) {
          //
        }
      },
    }
	}
</script>

<style lang="scss" scoped>
.main {
  padding: 24rpx;
  
  .card-box {
    background: #FFFFFF;
    box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
    border-radius: 10rpx;
    
    & + .card-box {
      margin-top: 24rpx;
    }
  }
}

// 企业信息
.company-info {
  .title-box {
    padding: 20rpx 24rpx;
    border-bottom: 1px solid #eee;
  }
  
  .info-box {
    padding: 0 24rpx;
    
    .row {
      padding: 30rpx 0;
      
      & + .row {
        border-top: 1px solid #eee;
      }
      
      .value {
        flex: 1;
        text-align: right;
        padding-left: 80rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

// 营业执照
.business-license {
  padding: 16rpx 24rpx;
  
  .right {
    font-size: 0;
    
    .img {
      width: 172rpx;
    }
  }
}
</style>
